<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字摇奖(老虎机)</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script type="text/javascript" src="js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
</head>
<body>
<marquee behavior=scroll class='success'></marquee> 
<div class="tag"><h1>保障性住房配售摇号</h1><h2>80m²户型摇号</h2></div>
<div class="main">
    <!--sider-->
    <div class="sider">
        <h1>选房编号:</h1>
        <div class="xf">
        	<div class="num_mask"></div>
            <div class="num_box1">
                <div class="num1"></div>	
                <div class="num1"></div>
                <div class="num1"></div>	
            </div>
        </div>
    </div>
    <!--sider end-->
    <!--content-->
    <div class="content">
        <h1>登记编号:</h1>
        <div class="dengji">
            <div id="res"></div>
            <div class="num_mask"></div>
            <div class="num_box clearfix">
                <div class="num"></div>
                <div class="num"></div>
                <div class="num"></div>
                <div class="num"></div>
            </div>
        </div>
    </div>
    <!--content end-->
</div>
<div class="btn"></div>
</body>
</html>
<script>
function numRand() {
	var x = 1000; //上限
	var y = 1; //下限
	var rand = parseInt(Math.random() * (x - y + 1) + y);
	return rand;
}

var isBegin = false;
var total = 10;	//总房数
var cur = 0; //当前房数
var u = 192;
var ft = '80m²';
var app = function(){
	return {
		t:function(){
			cur = parseInt(cur)+1;
			this.init();	
		},
		init:function(){
			//total = total<10 ? '0'+total : total;
			cur = parseInt(cur);
			if(cur<10){
			 cur = '00'+cur;
			}else if(cur<100){
			 cur = '0'+cur;
			}
		//	cur = cur<10 ? '0'+cur : cur;
			var t = (cur+'').split('');
			$(".num1").each(function(index){	
				$(this).animate({
					'backgroundPositionY':u*60 - (u*t[index])
				},500);
			});
		}
	};	
}();
$(function(){
	app.init();
	$('.btn').click(function(){
		if(isBegin) return false;
		if(cur>=total){
			alert('没房了');
			return false;	
		}
		isBegin = true;
		app.t();
		$(".num").css('backgroundPositionY',0);
		var result = numRand();
		if (result > 0 && result <= 10)
		{
				result = "000" + result;	
		}
		else if (result > 10 && result <= 100)
		{
			  result = "00" + result;
		}
		else if (result > 100 && result < 1000)
		{
				result = "0" + result;
		}
		$('#res').text('result = '+result);
		var num_arr = (result+'').split('');
		$(".num").each(function(index){
			var _num = $(this);
			setTimeout(function(){
				_num.animate({ 
					backgroundPositionY: (u*60) - (u*num_arr[index])
				},{
					duration: 2000,//6000+index*3000,
					easing: "easeInOutCirc",
					complete: function(){
						if(index==3) isBegin = false;
					}
				});
			}, index * 300);
			
		});
		setTimeout(function(){
				var suc_str = ft+'第'+cur+'位选房登记编号: '+result;
				$(".success").append('&nbsp;&nbsp;&nbsp;'+suc_str);
		}, 3000);
	});
});
</script>